<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册登录界面</title>
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">-->
    <link rel="stylesheet" th:href="@{/css/login.css}"  media="all">
    <script th:src="@{/js/jquery.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery.min.js}" type="text/javascript"></script>
</head>
<body>
<div class="container right-panel-active">
    <!-- 注册 -->
    <div class="container_form container--signup" style="background-color: black;">
        <form action="#" class="form" id="form1">
            <h2 class="form_title">Sign Up</h2>
            <input type="text" placeholder="User" class="input" />
            <input type="email" placeholder="Email" class="input" />
            <input type="password" placeholder="Password" class="input" />
            <button class="btn">Sign Up</button>
        </form>
    </div>

    <!-- 登录 -->
    <div class="container_form container--signin">
        <form  method="post" th:action="@{/dologin}"  class="form" >
            <h2 class="form_title">Sign In</h2>
            <label>
                <input name="username"  class="input" />
            </label>
            <label>
                <input name="password"  type="password" placeholder="Password" class="input" />
            </label>
            <a href="#" class="link">Forgot your password?</a>
            <input type="checkbox" name="remember" >记住我
            <div><input class="btn" type="submit"  value="Sign In"></div>
        </form>
    </div>

    <!-- 浮层 -->
    <div class="container_overlay">
        <div class="overlay">
            <div class="overlay_panel overlay--left">
                <button class="btn" id="signIn">Sign In</button>
            </div>
            <div class="overlay_panel overlay--right">
                <button class="btn" id="signUp">Sign Up</button>
            </div>
        </div>
    </div>
</div>

<!-- 背景 -->
<div class="slidershow">
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1575551020360-cdc7b7c79fae?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYyOTE4NjcwMQ&ixlib=rb-1.2.1&q=80&w=1080')"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1575138312433-d42e9f176f6b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&w=1080')"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1612596551406-507d16b622d5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&w=1080')"></div>
    <div class="slidershow--image" style="background-image: url('https://images.unsplash.com/photo-1612678587387-e8beea2392b4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYyNjcwMjU1NQ&ixlib=rb-1.2.1&q=80&w=1080')"></div>
</div>

<!-- partial -->
<script th:src="@{/js/jquery.js}" type="text/javascript" ></script>
<script th:src="@{/js/jquery.min.js}" type="text/javascript"></script>

<script th:src="@{/js/login.js}" type="text/javascript" ></script>
</body>
<script>
    $("#sign-In-submit").click(function () {

        // $.ajax({
        //     url: '/'
        // })
    })
</script>
</html>
